<template>
	<view class="comment-item-box">
		<view class="comment-item">
			<view class="comment-left">
				<image class="head" mode="scaleToFill" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
			</view>
			<view class="comment-right">
				<view class="name-box">
					<view class="name">
						ling
					</view>
					<view class="score">
						<u-rate v-model="score" :count="5" :disabled="true" active-color="#F43530" inactive-color="#bfbfbf"></u-rate>
					</view>
				</view>
				<view class="spec-view">
					<text class="spec-text">
						2020-10-12 15:30
					</text>
					<text class="spec-text">
						黑色
					</text>
				</view>
			</view>
		</view>
		<view class="comment-content">
			东西很好
		</view>
		<view class="comment-img">
			<image mode="scaleToFill" class="user-img" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
			<image mode="scaleToFill" class="user-img" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
			<image mode="scaleToFill" class="user-img" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
			<image mode="scaleToFill" class="user-img" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
		</view>
		<view class="reply-box">
			商家回复:删了，让我发
		</view>
	</view>
</template>

<script>
	export default{
		name:"commentList",
		props:{
			reply:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		data(){
			return {
				score:4
			}
		},
		methods:{
			onShowImage(){
				uni.previewImage({
					urls: ['https://cdn.uviewui.com/uview/swiper/1.jpg'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment-item-box{
		padding: 0;
		margin: 0;
		.comment-item{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.comment-left{
			flex-grow: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			.head{
				width: 80rpx;
				height: 80rpx;
				border-radius:50% 50%;
			}
		}
		.comment-right{
			flex-grow: 1;
			.name-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					color: #666666;
				}
			}
			.spec-view{
				margin-top: 10rpx;
				line-height: 1.3;
				color: #bfbfbf;
				font-family: 'Source Han Sans CN';
				font-weight: 400;
			}
			.spec-text:nth-of-type(2){
				margin-left: 40rpx;
			}
		}
		.comment-content{
			color: #666666;
			line-height: 1.3;
			padding: 20rpx 0;
		}
		.comment-img{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			align-content: flex-start;
			&::after {
				content: '';
				max-width: 28vw;
				min-width: 28vw;
			}
			.user-img{
				height: 28vw;
				width: 28vw;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				max-width: 440rpx;
				max-height: 440rpx;
			}
			.user-img:nth-of-type(3n){
				margin-right: 0;
			}
		}
		.reply-box{
			padding: 20rpx;
			background-color: #f3f3f3;
			color: #888888;
			border-radius: 10rpx;
		}
	}
</style>
